<template>
  <div class="home">
    <OlMap />
    <SearchInput />
    <!-- <Login /> -->
    <FootNavBar />
    <SideBarTools />
    <WeatherPage />
    <UserCenter />
    <Reservation />
    <OrderList />
    <!-- <PopUpPanel /> -->
    <!-- <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button> -->
    <!-- <ListItem
      v-for="(item, index) in items"
      :key="index"
      :itemProperty="item"
      @clickListItem="clickListItem"
    /> -->
    <van-popup
      v-model="this.$store.state.isShowPopUp"
      position="bottom"
      :style="{ height: '30%' }"
      @click-overlay="closePopUp"
      ><van-list
        v-model="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ListItem
          v-for="(item, index) in items"
          :key="index"
          :itemProperty="item"
          @clickListItem="clickListItem"
        /> </van-list
    ></van-popup>
  </div>
</template>

<script>
// @ is an alias to /src
//import vue components
import OlMap from '../components/OlMap'
// import Login from '../components/Login'
import FootNavBar from '../components/FootNavBar' //底部tab控件
import SearchInput from '../components/SearchInput' //搜索工具
import SideBarTools from '../components/SideBarTools' //侧边工具
import WeatherPage from '../components/WeatherPage' //天气页面
import UserCenter from '../components/UserCenter' //个人中心
import Reservation from '../components/Reservation' //预约页面
import OrderList from '../components/list/OrderList' //订单列表
// import PopUpPanel from '../components/panels/PopUpPanel'
import ListItem from '../components/controls/ListItem' //信息列表
//import utils
import * as SERVICE from '../utils/service'
import * as MapConfig from '../utils/mapConfig'
import { fromLonLat } from 'ol/proj'
export default {
  name: 'Home',
  components: {
    OlMap, //地图视图
    SearchInput, //顶部搜索栏
    FootNavBar, //底部导航栏
    WeatherPage, //天气页面
    UserCenter, //个人中心
    Reservation, //预约页面
    OrderList, //订单列表
    SideBarTools, //侧边工具
    // PopUpPanel, //底部弹出层
    ListItem, //加载项
  },
  data() {
    return {
      state: {
        list: [],
        loading: false,
        finished: false,
      },
      item: {
        id: 1,
        name: '河南盛世管家家政服务有限公司',
        lon: 123.5,
        lat: 32.56,
        distance: '12.622',
      },
      items: [
        // {
        //   id: 1,
        //   name: '河南盛世管家家政服务有限公司',
        //   lon: 123.5,
        //   lat: 32.56,
        //   distance: '12.622',
        // },
        // {
        //   id: 1,
        //   name: '河南盛世管家家政服务有限公司',
        //   lon: 123.5,
        //   lat: 32.56,
        //   distance: '12.622',
        // },
        // {
        //   id: 1,
        //   name: '河南盛世管家家政服务有限公司',
        //   lon: 123.5,
        //   lat: 32.56,
        //   distance: '12.622',
        // },
        // {
        //   id: 1,
        //   name: '河南盛世管家家政服务有限公司',
        //   lon: 123.5,
        //   lat: 32.56,
        //   distance: '12.622',
        // },
        // {
        //   id: 1,
        //   name: '河南盛世管家家政服务有限公司',
        //   lon: 123.5,
        //   lat: 32.56,
        //   distance: '12.622',
        // },
      ],
    }
  },
  computed: {
    onShowPopUp() {
      return this.$store.state.isShowPopUp
    },
  },
  watch: {
    onShowPopUp(value) {
      console.log(value)
      //获取属性值
      if (this.$store.state.itemAttr) {
        let curPos = {
          lng: undefined,
          lat: undefined,
        }
        let _this = this
        navigator.geolocation.getCurrentPosition(
          (pos) => {
            curPos['lng'] = pos.coords.longitude
            curPos['lat'] = pos.coords.latitude
            console.log(curPos)
            //判断属性值
            switch (this.$store.state.itemAttr) {
              case '购物': {
                //超市点列表
                SERVICE.getSuperMarketList(curPos.lng, curPos.lat).then(
                  (res) => {
                    let data = res.data
                    console.log(data)
                    _this.$data.items = data
                  }
                )
                break
              }
              case '医院': {
                SERVICE.getHospitalList(curPos.lng, curPos.lat).then((res) => {
                  let data = res.data
                  console.log(data)
                  _this.$data.items = data
                })
                break
              }
              case '公园': {
                SERVICE.getSceneryPointList(curPos.lng, curPos.lat).then(
                  (res) => {
                    let data = res.data
                    console.log(data)
                    _this.$data.items = data
                  }
                )
                break
              }
            }
          },
          (err) => {
            console.log(err)
          }
        )
      }
    },
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.$data.state.list.push(this.$data.state.list.length + 1)
        }

        // 加载状态结束
        this.$data.state.loading = false

        // 数据全部加载完成
        if (this.$data.state.list.length >= 40) {
          this.$data.state.finished = true
        }
      }, 1000)
    },
    /**列表组内容点击事件 */
    clickListItem(value) {
      console.log(value)
      //根据点击项目的经纬度值，切换到指定位置点
      //切换场景
      MapConfig.staticParam.olmap.getView().setCenter(
        fromLonLat(
          // gcoord.transform(lnglat, gcoord.WGS1984, gcoord.GCJ02)
          [value.lng, value.lat]
        )
      )
      //关闭遮罩
      this.$store.dispatch('setShowPopUp', false)
    },
    closePopUp() {
      console.log('关闭')
      this.$store.dispatch('setShowPopUp', false)
    },
  },
}
</script>

<style lang="less" scoped>
.box {
  width: 120px;
  height: 150px;
  background-color: antiquewhite;
}
</style>
